<template>
  <div>
    <form action="/">
      <van-search v-model="val" show-action placeholder="请输入搜索关键词" @input='down' @keydown.enter="enter"/>
    </form>
    <div v-show="show">
      <p class="re">热门搜索</p>
      <p><span>历史记录</span><span class="shanchu" @click="remove">x</span></p>
      <p class="lishi" v-for="(item,index) in lishi" :key="index">{{item}}</p>
    </div>
    <div class="" v-show="!show">
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="add(item)">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        val: '',
        show: 'true',
        list: [],
        lishi: []
      }
    },
    methods: {
      down() {
        this.list = [];
        if (this.val == '') {
          this.show = true
        } else {
          this.show = false
        }
        this.$axios.get('data.json').then(res => {
          // console.log(res)
          res.data.data.data.forEach(i => {
            if (i.kw.includes(this.val)) {
              this.list.push(i.kw)
            }
          })
        })
      },
      enter(){
        if(this.val==''){
          return
        }else{
          this.lishi.push(this.val)
        }
        this.val=''
        if (this.val == '') {
          this.show = true
        } else {
          this.show = false
        }
      },
      remove(){
        this.lishi=[]
      },
      add(i){
        this.lishi.push(i)
        this.val=''
        if (this.val == '') {
          this.show = true
        } else {
          this.show = false
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
  ul {
    list-style: none;
  }
  .shanchu{
    float: right;
    margin-right: 10px;
  }
  .lishi{
    color: gray;
    font-size: 20px;
  }
  .re{
    padding-bottom: 10px;;
    border-bottom: 10px solid rgb(216, 214, 214);
  }
</style>